<template>
  <div class="content">
    <van-nav-bar title="我发起的任务" left-arrow @click-left="onClickLeft" @click-right="onClickRight">
      <template #right>
        <van-icon name="plus" size="18" />
      </template>
    </van-nav-bar>
    <van-search v-model="value" show-action placeholder="请输入搜索关键词" @cancel="onCancel">
      <template #action>
        <div style="display: flex;align-items: center;justify-content: center">
          <van-icon name="list-switch" @click="onSearch" size="20"/>
        </div>
      </template>
    </van-search>
    <van-cell-group inset style="margin-top: 10px">
      <van-cell title="全员日志" is-link />
    </van-cell-group>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh" id="pullRefresh">
      <van-cell-group class="list" inset v-for="item in list" :key="item.id">
        <van-cell>
          <template #title>
            <div v-for="(item,index) in item.testList" :key="index">{{index + 1}}、{{item}}</div>
          </template>
          <template #label>
            <div>{{item.date}} | {{item.name}}</div>
          </template>
        </van-cell>
      </van-cell-group>
      <div style="height: 10px" />
    </van-pull-refresh>
  </div>
</template>

<script>
import gsap from 'gsap'
import ScrollTrigger from 'gsap/ScrollTrigger'
gsap.registerPlugin(ScrollTrigger);

const item = {
  testList: ['安排杂工5人，补洞20处:', '工地停水9:00~11:00;', '1#楼左电梯故障停用1天'],
  name: '黄奕辉',
  date: '2022-03-14'
}
export default {
  data() {
    return {
      value: '',
      isLoading: false,
      list: []
    }
  },
  mounted() {
    this.isLoading = true
    this.onRefresh()
  },
  methods: {
    onCancel() {},
    onSearch() {},
    onRefresh() {
      this.list = []
      setTimeout(async () => {
        this.isLoading = false
        this.list = Array.from({length: 20}).map((item1,index) => ({ ...item,id: index + 1 }))
        setTimeout(()=>{
          const time = gsap.timeline()
          const cards = gsap.utils.toArray(".list");
          cards.forEach((card,index) => {
            const data = this.list[index]
            ScrollTrigger.create({
              trigger: card,
              id: `list-${data.id}`,
              start: "top bottom",
              end: "bottom bottom",
              scroller: '#pullRefresh',
              // markers: true,
              onUpdate(self) {
                const { id } = self.vars
                if (!time.getById(id)) {
                  time.to(self.trigger, {
                    id, data, duration: 0.2,
                    keyframes: {
                      '0%': { transform: 'translateY(0%)', opacity: 0 },
                      '1%': { transform: 'translateY(100%)', opacity: 0 },
                      '100%': { transform: 'translateY(0%)', opacity: 1 }
                    },
                  }, "<+=0.1")
                }
              }
            })
          });
        },300)
      },1000)
    },
    onClickLeft() {
      this.$toast('返回');
    },
    onClickRight() {
      this.$toast('添加');
    }
  }
}
</script>

<style scoped lang="scss">
.content {
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-flow: column;
  background: #eeeeee;
  .van-nav-bar {
    ::v-deep {
      .van-icon {
        color: black;
      }
    }
  }
  .van-pull-refresh {
    flex: 1;
    overflow: auto;
    margin-top: 10px;
  }
  .van-cell-group {
    +.van-cell-group {
      margin-top: 10px;
    }
  }
  .list {
    opacity: 0;
  }
}
</style>
